<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="main/_fragments :: header(~{::title},~{},~{::meta})">
    <!--  关键字  -->
    <meta type="keywords" content="ZGX博客标签"/>
    <!--  描述　-->
    <meta type="description" content="ZGX博客标签详情页面"/>
    <title>ZGX博客标签页面</title>
</head>
<body>

<!--头部导航-->
<div th:replace="main/_fragments :: menu(3)"></div>

<!--中间内容   ctrl+enter先输入内容然后注释-->
<!--div +tab 快速补全代码-->
<div id="middle-content" class="m-container-small m-padded-tb-big">
    <div class="ui container">
        <div class="ui top attached segment">
            <!--middle aligned 代表垂直居中-->
            <div class="ui middle aligned two column grid">
                <div class="column">
                    <h3 class="ui teal header" th:text="#{fragment.header.blog.label}"></h3>
                </div>
                <div class="right aligned column">
                    [[#{index.blog.Middle.title.common}]]<h2 class="ui orange m-inline-blok header m-padded-tb-tiny"
                         th:text="${#arrays.length(tagBeans)}"></h2>[[#{category.label.individual.test}]]
                </div>
            </div>
        </div>
        <div class="ui attached segment m-padded-tb-large">
            <a th:href="@{/label/{id}(id=${each.id})}" href="#" th:each="each : ${tagBeans}" class="ui basic left pointing large label m-margin-tb-tiny" th:classappend="${each.id == selectionId}? 'red'">[[${each.name}]]
                <div class="detail" th:text="${#arrays.length(each.blogBeans)}"></div>
            </a>
        </div>


        <div class="ui teal top attached segment">
            <div class="ui padded vertical segment m-padded-tb-big" th:each="each : ${pages.content}">
                <!--mobile reversed 移动端图片显示上面-->
                <div class="ui middle aligned mobile reversed stackable grid">
                    <div class="eleven wide column">
                        <h3 class="ui header m-block">
                            <a th:href="@{'/blog/'+${each.id}}" class="index-title text-over" target="_blank">
                                <th:block th:if="${each.top == 1}">
                                    <svg t="1571998551990" class="icon" viewBox="0 0 1033 1024" version="1.1"
                                         xmlns="http://www.w3.org/2000/svg" p-id="2004" width="30" height="30">
                                        <path d="M207.36 465.92l-12.288-43.52c-3.584-11.776-7.168-23.552-11.776-35.328-4.608-8.704-1.536-13.824 8.704-15.872 11.776-2.048 29.184-3.584 52.736-3.584 3.584 0 6.144 1.024 7.68 3.072l179.712-51.712c4.608-17.92 9.728-28.16 14.336-30.72 15.872-2.56 34.816 0 55.808 7.68 8.192 4.608 9.728 10.24 5.12 16.896-4.608 3.584-6.144 8.192-4.096 14.848l11.776 40.448c3.072 7.168 1.536 12.288-5.12 16.384 16.384 3.072 31.744 9.216 45.568 18.432 4.096 2.048 5.632 4.608 5.12 6.656 1.024 3.072-0.512 5.12-4.608 6.656L404.48 459.776l8.704 30.72 19.968-5.632c6.656-18.432 12.8-29.184 17.408-31.744 15.872-2.56 35.84 1.536 58.368 11.776 9.216 4.096 11.264 10.24 6.656 17.92-6.144 6.144-7.68 11.776-5.12 16.384l33.792 117.76c6.656-18.432 12.288-28.672 16.384-29.696 10.24-3.072 30.72 3.072 61.952 17.408 8.704 7.68 8.192 13.312-1.536 17.408-50.176 12.288-88.576 22.016-115.2 29.696L313.856 706.56c-19.456 5.12-37.888 12.288-55.808 20.992-3.072 2.048-5.632 1.536-8.704-1.024-4.608-2.56-9.216-6.144-12.8-9.728-2.048-3.072-1.536-4.608 2.048-5.632 6.656 0.512 26.624-4.096 59.904-12.288 7.68-1.024 12.8-2.048 15.872-3.072L285.184 593.92c-6.656-22.528-14.848-45.056-24.064-66.56-5.12-10.752-2.56-16.384 8.192-17.408s28.672-1.536 53.248-2.048c1.536 1.024 2.56 1.024 3.584 0.512 4.608 1.024 7.168 2.56 8.192 4.608l18.432-5.12-8.704-30.72-89.6 25.6c-15.872 4.096-30.72 10.24-45.056 17.92-2.048 1.536-4.608 1.024-9.216-2.56-2.048-1.536-3.584-3.072-5.12-5.12l-6.144-3.072c-3.072-2.56-2.048-4.096 2.048-4.096 27.648-4.608 48.64-8.704 62.976-13.312l86.528-25.088-11.264-38.4-66.56 18.944c1.024 6.656-3.072 11.264-10.752 14.848-8.192 5.12-17.408 9.216-26.624 12.8-9.216 4.096-14.848 1.024-17.92-9.728zM82.944 104.448C7.168 233.984-11.264 377.344 26.112 526.336c77.312 310.784 391.68 499.712 702.464 421.888 129.536-32.256 223.232-105.472 302.08-209.408l0.512-64.512c-72.192 94.72-197.12 194.56-315.392 223.744-283.136 70.656-569.344-101.376-640-384.512-33.792-135.68-15.36-293.888 64-408.576l-56.832-0.512z m280.064 543.232l9.216 32.256 113.152-32.256-9.216-32.768-113.152 32.768z m-11.264-40.448l8.704 30.72 113.152-32.256-8.704-30.72c-0.512 0-113.152 32.256-113.152 32.256z m-11.776-39.936l8.704 30.72 113.152-32.256-8.704-30.72-113.152 32.256z m-7.168-25.088l4.608 15.36 113.152-32.256-8.704-30.72-106.496 30.72-1.024 2.048c-3.072 3.584-3.072 8.704-1.536 14.848z m145.408-141.824c-10.24 7.168-16.384 4.608-18.944-7.68L398.848 409.6c4.096 3.072 4.608 8.192 1.024 14.848-3.584 3.072-4.096 8.192-2.048 15.872l3.072 10.752 81.92-23.552c2.56-14.336 6.144-25.088 10.752-33.28l-6.144 1.536c-3.072 2.048-6.144 3.584-9.216 4.608z m-37.376-71.68l-30.72 8.704L424.96 390.656l30.72-8.704-14.848-53.248z m-114.688 33.28L340.992 414.72l32.256-9.216L358.4 352.768c0.512-0.512-32.256 9.216-32.256 9.216z m-78.336 35.84l11.776 40.448 30.72-8.704-15.36-52.736-24.576 7.168c-3.584 2.56-4.096 7.68-2.56 13.824z m428.544 133.12l-67.584-235.008-19.968 5.632c-7.68 2.048-15.36 5.632-22.528 9.728-4.096 2.048-6.656 2.56-8.192 0.512-2.56-2.048-4.608-4.096-6.656-6.144-1.024-1.536-2.56-2.56-4.608-3.584-2.048-2.56-1.024-4.096 2.048-4.096 14.848-2.048 29.184-5.12 42.496-8.704l66.56-18.944c5.12-21.504 10.752-34.304 17.408-38.4 6.656-1.024 16.896 2.048 30.72 7.68l16.896-5.12c8.704-1.536 14.848-2.56 18.944-3.584l108.544-31.232c8.192-25.6 14.848-39.424 19.968-40.96 12.8-1.536 32.768 4.608 58.88 18.432 5.12 6.144 4.096 11.264-2.56 14.336-29.696 7.168-59.392 14.848-88.576 23.552l-3.072 1.024c2.56 5.12 1.536 9.728-2.56 14.336-5.12 4.096-8.704 9.728-10.24 16.384-1.536 15.872-6.144 31.744-13.824 45.568l48.128-13.824c5.632-15.872 10.752-25.088 15.36-27.648 19.968-1.024 39.936 3.584 57.344 13.824 7.68 3.584 9.216 8.704 4.608 15.36-4.608 3.584-5.632 8.704-3.584 15.872l8.192 29.184c6.656 22.528 16.384 53.248 29.696 92.16 3.584 12.288 1.024 21.504-7.168 27.136-1.536 0.512-3.072 1.536-4.096 3.072-8.192 4.096-16.384 7.68-25.6 10.752-1.024 1.536-2.048 2.048-4.096 3.072 30.72-2.048 54.784 2.048 72.192 12.8 22.528 19.456 23.552 38.912 3.584 59.392-11.776 10.24-29.184 4.096-52.224-18.432-22.528-16.896-45.056-27.648-66.56-32.768-11.776 44.544-53.248 84.48-124.928 119.296-6.656 3.072-10.752 3.584-11.264 1.536-3.072-2.56-1.536-6.144 5.12-11.776 70.144-54.784 95.232-115.2 75.264-180.736l-6.144-21.504c-7.168-24.576-14.336-43.52-20.992-55.808-3.072-7.168-4.096-11.264-3.584-12.288 1.536-2.56 5.632-4.608 11.776-5.12 15.36-2.048 30.72-2.56 46.592-1.536 9.728-0.512 13.312 4.608 9.728 15.872-2.048 4.096-2.56 9.216-1.024 13.824l15.36 54.272c6.656 22.528 8.704 44.544 7.168 65.024 11.264 0 22.016-1.024 32.768-2.56-3.584-1.024-6.656-5.12-8.704-12.8l-45.056-157.696-92.672 26.624 23.04 80.384c3.072 10.24 6.656 20.48 10.24 30.72 4.608 12.288 8.704 24.576 12.288 36.864 5.12 14.336 2.56 25.088-7.68 32.256-3.072 1.024-6.144 2.56-8.704 4.096-5.12 3.584-10.24 6.656-15.872 9.728-12.288 7.168-20.48 2.048-24.064-14.848-6.144-29.696-13.824-59.392-22.016-89.088l-8.704-30.72c-8.192-28.672-15.872-50.176-23.04-63.488-5.12-10.752-2.048-16.896 9.728-17.92 5.632-0.512 15.872 0 30.72 1.536 7.168 1.536 12.8 2.048 17.408 2.048 5.632 0.512 9.728 2.048 11.264 5.12-1.024-22.016-5.12-44.032-11.776-65.024l-35.84 10.24c-1.536 0.512-3.072 1.536-4.096 3.072 7.168 4.608 7.168 9.216 0.512 13.312l-46.592 13.312c1.536 5.12 0.512 9.728-2.56 14.336-4.096 4.096-5.632 10.24-3.584 15.872l28.16 97.28c7.68 26.624 22.016 72.704 43.008 138.24 6.656 18.432 3.584 33.28-9.216 44.544-2.048 4.096-8.704 9.728-19.968 17.408l-4.096 3.072c-12.288 8.192-20.992 6.656-26.112-4.096-10.752-14.848-23.552-20.48-38.4-17.408-9.216-1.024-14.336-2.56-14.848-5.632-1.024-3.072 4.096-5.632 14.336-7.68 26.624-7.68 36.864-20.992 29.184-43.52z"
                                              p-id="2005" fill="#d81e06"></path>
                                    </svg>
                                </th:block>
                                [[${each.title}]]
                            </a>
                        </h3>
                        <p class="m-text" th:text="${each.description}"></p>
                        <div class="ui grid">
                            <div class="eleven wide column">
                                <div class="ui mini horizontal link list">
                                    <div class="item">
                                        <img th:src="${each.userBean.avatar}" src="../static/images/box.png"
                                             alt="" class="ui avatar image">
                                        <div class="content">
                                            <a href="#" class="header" th:text="${each.userBean.nickName}"></a>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <i class="clock outline icon"></i>[[${#dates.format(each.createTime,'yyyy-MM-dd
                                        HH:mm')}]]
                                    </div>
                                    <div class="item">
                                        <i class="eye icon"></i>[[${each.views}]]
                                    </div>
                                    <div class="item">
                                        <i class="comment alternate icon" th:text="${#arrays.length(each.commentBeans)}"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="right aligned five wide column">
                                <a th:href="@{'/blog/'+${each.id}}" target="_blank"
                                   class="ui teal basic m-padded-mini label m-padded-tb-tiny" th:text="#{index.blog.Middle.full.text}"></a>
                            </div>
                        </div>
                    </div>
                    <div class="five wide column">
                        <div class="ui fluid image">
                            <th:block th:if="${each.top == 1}">
                                <a class="ui red right corner label" th:href="@{/blog/{id}(id=${each.id})}"
                                   target="_blank">
                                    <i class="vaadin icon"></i>
                                </a>
                            </th:block>
                            <img th:src="${each.firstPicture}">
                        </div>
                    </div>
                </div>
            </div>
            <div th:if="${#arrays.isEmpty(pages.content)}" class="ui warning message">
                <div class="header" th:text="#{label.waring.test}"></div>
                <ul class="list">
                    <li th:text="#{label.waring.test.li}"></li>
                    <li th:text="#{category.label.warning.category}"></li>
                </ul>
            </div>
        </div>

        <!--上一页 下一页 底部-->
        <div class="ui floated right pagination menu" th:if="${pages.totalPages>1}">
            <div class="item">
                [[#{index.blog.page.current}]]
                <span class="basic" th:text="${pages.getNumber()} + 1"></span>[[#{index.blog.page}]]
                [[#{index.blog.total}]]<span class="ui positive" th:text="${pages.totalPages}"></span>[[#{index.blog.page}]]
                [[#{index.blog.common}]]<span class="ui positive" th:text="${pages.totalElements}"></span>[[#{index.blog.bar.data}]]
            </div>
            <a class="active item" th:href="@{/label/{id}(id=${selectionId})}" th:text="#{fragment.header.blog.home}"></a>
            <a class="item" th:class="${pages.first}?'item disabled' :'item'"
               th:href="${pages.first}?'javascript:return false;': @{'/label/'+${selectionId}(page = ${pages.number}-1)}">
                [[#{index.blog.previous.page}]]
            </a>
            <a class="item" th:class="${pages.last}?'item disabled' :'item'"
               th:href="${pages.last}?'javascript:return false;': @{'/label/'+${selectionId}(page = ${pages.number}+1)}">
                [[#{index.blog.next.page}]]
            </a>
            <a class="item" th:href="@{'/label/'+${selectionId}(page = ${pages.totalPages}-1)}">
                [[#{index.blog.tail.page}]]
            </a>
        </div>

    </div>
</div>


<!--用户个人信息部分-->
<div th:replace="main/personal_fragments :: user_personal"></div>
<br>
<br>
<br>
<!--尾部-->
<div th:replace="main/_fragments :: footer"></div>
<div th:replace="main/_fragments :: toTop"></div>

<!--引入js-->
<th:block th:replace="main/_fragments :: script"></th:block>

<script>

</script>
</body>
</html>